<template>
  <view class="page result-page">
    <view class="result-header">
      <button class="back-button" @click="goBack">←</button>
      <view class="header-content">
        <view class="header-left">
          <text class="result-title">您的MBTI人格类型</text>
          <view class="mbti-type-container">
            <text class="mbti-type">{{ mbtiType }}</text>
            <text class="mbti-name">{{ getMBTITypeName(mbtiType) }}</text>
          </view>
          <view class="compatibility">
            <text class="compatibility-label">最佳匹配：</text>
            <text class="compatibility-types">{{ getCompatibleTypes(mbtiType) }}</text>
          </view>
        </view>
        <view class="header-right">
          <image :src="getMBTISvgImage(mbtiType.toLowerCase())" class="mbti-svg-image" mode="aspectFit"></image>
        </view>
      </view>
    </view>
    
    <!-- Tab导航 -->
    <view class="tab-navigation">
      <view 
        class="tab-item" 
        :class="{ active: activeTab === 'basic' }" 
        @click="switchTab('basic')"
      >
        基础画像
      </view>
      <view 
        class="tab-item" 
        :class="{ active: activeTab === 'jung' }" 
        @click="switchTab('jung')"
      >
        荣格八格
      </view>
      <view 
        class="tab-item" 
        :class="{ active: activeTab === 'career' }" 
        @click="switchTab('career')"
      >
        职场小结
      </view>
      <view 
        class="tab-item" 
        :class="{ active: activeTab === 'love' }" 
        @click="switchTab('love')"
      >
        恋爱锦囊
      </view>
    </view>
    
    <scroll-view 
      class="result-content" 
      scroll-y
      refresher-enabled="true"
      :refresher-triggered="refreshing"
      @refresherrefresh="onRefresh"
    >
      <!-- 下拉刷新提示 -->
      <view class="refresh-tip" v-if="refreshing">
        <text>正在刷新...</text>
      </view>
      
      <!-- 基础画像 -->
      <view v-if="activeTab === 'basic'" class="result-section">
        <view class="section-header">
          <text class="section-icon">👤</text>
          <text class="section-title">基础画像</text>
        </view>
         <p class="tip-text">如果数据为空，请等待一会儿，刷新页面即可</p>
        <view class="section-content">
          <!-- 维度占比 -->
          <view class="dimensions-section">
            <view class="section-subtitle">维度占比</view>
            <view class="dimension-item">
              <view class="dimension-letters">
                <text class="dimension-letter left">E(外向)</text>
                <text class="dimension-letter right">I(内向)</text>
              </view>
              <view class="progress-container">
                <view class="progress-bar">
                  <view class="progress-fill left" :style="{ width: getEIPercentage() }"></view>
                  <view class="progress-fill right" :style="{ width: (100 - parseInt(getEIPercentage())).toString() + '%' }"></view>
                </view>
              </view>
              <view class="dimension-percentages">
                <text class="dimension-percentage left">{{ getEIPercentage().replace('%', '') }}%</text>
                <text class="dimension-percentage right">{{ (100 - parseInt(getEIPercentage())).toString() }}%</text>
              </view>
            </view>
            <view class="dimension-item">
              <view class="dimension-letters">
                <text class="dimension-letter left">S(实感)</text>
                <text class="dimension-letter right">N(直觉)</text>
              </view>
              <view class="progress-container">
                <view class="progress-bar">
                  <view class="progress-fill left" :style="{ width: getSNPercentage() }"></view>
                  <view class="progress-fill right" :style="{ width: (100 - parseInt(getSNPercentage())).toString() + '%' }"></view>
                </view>
              </view>
              <view class="dimension-percentages">
                <text class="dimension-percentage left">{{ getSNPercentage().replace('%', '') }}%</text>
                <text class="dimension-percentage right">{{ (100 - parseInt(getSNPercentage())).toString() }}%</text>
              </view>
            </view>
            <view class="dimension-item">
              <view class="dimension-letters">
                <text class="dimension-letter left">T(理性)</text>
                <text class="dimension-letter right">F(情感)</text>
              </view>
              <view class="progress-container">
                <view class="progress-bar">
                  <view class="progress-fill left" :style="{ width: getTFPercentage() }"></view>
                  <view class="progress-fill right" :style="{ width: (100 - parseInt(getTFPercentage())).toString() + '%' }"></view>
                </view>
              </view>
              <view class="dimension-percentages">
                <text class="dimension-percentage left">{{ getTFPercentage().replace('%', '') }}%</text>
                <text class="dimension-percentage right">{{ (100 - parseInt(getTFPercentage())).toString() }}%</text>
              </view>
            </view>
            <view class="dimension-item">
              <view class="dimension-letters">
                <text class="dimension-letter left">J(判断)</text>
                <text class="dimension-letter right">P(知觉)</text>
              </view>
              <view class="progress-container">
                <view class="progress-bar">
                  <view class="progress-fill left" :style="{ width: getJPPercentage() }"></view>
                  <view class="progress-fill right" :style="{ width: (100 - parseInt(getJPPercentage())).toString() + '%' }"></view>
                </view>
              </view>
              <view class="dimension-percentages">
                <text class="dimension-percentage left">{{ getJPPercentage().replace('%', '') }}%</text>
                <text class="dimension-percentage right">{{ (100 - parseInt(getJPPercentage())).toString() }}%</text>
              </view>
            </view>
          </view>
          
          <!-- 人格指数 -->
          <view class="personality-index">
            <view class="section-subtitle">人格指数</view>
            <text class="index-description">{{ personalityIndexDescription }}</text>
          </view>
          
          <!-- 人格字母介绍 -->
          <view class="letter-description">
            <view class="section-subtitle">人格字母介绍</view>
            <view class="letter-details">
              <view class="letter-item" v-for="(desc, index) in getLetterDescriptions()" :key="index">
                <text class="letter">{{ desc.letter }}</text>
                <text class="letter-desc">{{ desc.description }}</text>
              </view>
            </view>
          </view>
          
          <!-- 人格特点 -->
          <view class="personality-traits">
            <view class="section-subtitle">人格特点</view>
            <text class="traits-text">{{ personalityTraits }}</text>
            <view class="traits-tags">
              <view class="trait-tag" v-for="(trait, index) in personalityTags" :key="index">
                {{ trait }}
              </view>
            </view>
          </view>
          
          <!-- 人格稀有度 -->
          <view class="rarity-section">
            <view class="section-subtitle">人格稀有度</view>
            <view class="rarity-content">
              <text class="rarity-text">{{ getRarityText() }}</text>
              <view class="rarity-bar">
                <view class="rarity-fill" :style="{ width: getRarityPercentage() }"></view>
              </view>
              <text class="rarity-percent">{{ getRarityPercentage() }}</text>
              <view class="rarity-details">
                <text class="rarity-detail">男性占比: {{ parseRarityData('man') }}</text>
                <text class="rarity-detail">女性占比: {{ parseRarityData('woman') }}</text>
              </view>
            </view>
          </view>
          
          <!-- 代表人物 -->
          <view class="celebrity-section">
            <view class="section-subtitle">代表人物</view>
            <view class="celebrity-list">
              <view class="celebrity-item" v-for="(celebrity, index) in famousPeople" :key="index">
                <image :src="celebrity.avatar" class="celebrity-avatar" mode="aspectFit"></image>
                <view class="celebrity-info">
                  <text class="celebrity-name">{{ celebrity.name }}</text>
                  <text class="celebrity-desc">{{ celebrity.description }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 荣格八格 -->
      <view v-else-if="activeTab === 'jung'" class="result-section">
        <view class="section-header">
          <text class="section-icon">🧠</text>
          <text class="section-title">荣格八格</text>
        </view>
         <p class="tip-text">如果数据为空，请等待一会儿，刷新页面即可</p>
        <view class="section-content">
          <!-- 蒙版内容 -->
          <view class="masked-content" v-if="!isPaid">
            <view class="mask-overlay">
              <text class="mask-text">解锁完整报告</text>
              <button class="pay-btn" @click="showPayment(testType, price, testId)">
                <text class="pay-icon">🔓</text>
                <text>支付解锁</text>
              </button>
              <text class="pay-price">¥{{ price }}</text>
            </view>
            <text class="masked-text">{{ fullJungTips }}</text>
          </view>
          <view v-else>
            <!-- 主导功能 -->
            <view class="jung-function">
              <view class="section-subtitle">主导功能</view>
              <text class="function-description">{{ dominantFunction }}</text>
            </view>
            
            <!-- 辅助功能 -->
            <view class="jung-function">
              <view class="section-subtitle">辅助功能</view>
              <text class="function-description">{{ auxiliaryFunction }}</text>
            </view>
            
            <!-- 第三功能 -->
            <view class="jung-function">
              <view class="section-subtitle">第三功能</view>
              <text class="function-description">{{ tertiaryFunction }}</text>
            </view>
            
            <!-- 劣势功能 -->
            <view class="jung-function">
              <view class="section-subtitle">劣势功能</view>
              <text class="function-description">{{ inferiorFunction }}</text>
            </view>
            
            <!-- 认知功能堆栈 -->
            <view class="jung-function">
              <view class="section-subtitle">认知功能堆栈</view>
              <text class="function-stack">{{ functionStack }}</text>
            </view>
            
            <!-- 功能发展建议 -->
            <view class="jung-function">
              <view class="section-subtitle">功能发展建议</view>
              <text class="development-suggestion">{{ developmentSuggestion }}</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 职场小结 -->
      <view v-else-if="activeTab === 'career'" class="result-section">

        <view class="section-header">
          <text class="section-icon">💼</text>
          <text class="section-title">职场小结</text>
        </view>
        <p class="tip-text">如果数据为空，请等待一会儿，刷新页面即可</p>
        <view class="section-content">
          <!-- 蒙版内容 -->
          <view class="masked-content" v-if="!isPaid">
            <view class="mask-overlay">
              <text class="mask-text">解锁完整报告</text>
              <button class="pay-btn" @click="showPayment(testType, price, testId)">
                <text class="pay-icon">🔓</text>
                <text>支付解锁</text>
              </button>
              <text class="pay-price">¥{{ price }}</text>
            </view>
            <text class="masked-text">{{ fullCareerTips }}</text>
          </view>
          <view v-else>
            <!-- 优势 -->
            <view class="career-section">
              <view class="section-subtitle">优势</view>
              <text class="career-text">{{ careerAdvantages }}</text>
            </view>
            
            <!-- 适合岗位 -->
            <view class="career-section">
              <view class="section-subtitle">适合岗位</view>
              <text class="career-text">{{ suitablePositions }}</text>
            </view>
            
            <!-- 沟通风格 -->
            <view class="career-section">
              <view class="section-subtitle">沟通风格</view>
              <text class="career-text">{{ communicationStyle }}</text>
            </view>
            
            <!-- 领导潜力 -->
            <view class="career-section">
              <view class="section-subtitle">领导潜力</view>
              <text class="career-text">{{ leadershipPotential }}</text>
            </view>
            
            <!-- 发展建议 -->
            <view class="career-section">
              <view class="section-subtitle">发展建议</view>
              <text class="career-text">{{ careerDevelopmentSuggestion }}</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 恋爱锦囊 -->
      <view v-else-if="activeTab === 'love'" class="result-section">
        <view class="section-header">
          <text class="section-icon">❤️</text>
          <text class="section-title">恋爱锦囊</text>
        </view>
        <p class="tip-text">如果数据为空，请等待一会儿，刷新页面即可</p>
        <view class="section-content">
          <!-- 蒙版内容 -->
          <view class="masked-content" v-if="!isPaid">
            <view class="mask-overlay">
              <text class="mask-text">解锁完整报告</text>
              <button class="pay-btn" @click="showPayment(testType, price, testId)">
                <text class="pay-icon">🔓</text>
                <text>支付解锁</text>
              </button>
              <text class="pay-price">¥{{ price }}</text>
            </view>
          </view>
          <!-- 解锁后的内容 -->
          <view v-else>
            <view class="love-section">
              <view class="section-subtitle">恋爱类型</view>
              <text class="love-text">{{ loveType }}</text>
            </view>
            
            <view class="love-section">
              <view class="section-subtitle">吸引特质</view>
              <text class="love-text">{{ attractTraits }}</text>
            </view>
            
            <view class="love-section">
              <view class="section-subtitle">表达爱意</view>
              <text class="love-text">{{ expressLove }}</text>
            </view>
            
            <view class="love-section">
              <view class="section-subtitle">理想伴侣</view>
              <text class="love-text">{{ idealPartner }}</text>
            </view>
            
            <view class="love-section">
              <view class="section-subtitle">关系维护</view>
              <text class="love-text">{{ relationshipMaintenance }}</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
    
    <view class="result-footer">

    <button open-type="share"  class="action-btn share-btn"  :data-mbtiType="mbtiType">
      <view class="btn-content">
          <text class="btn-icon">📤</text>
          <text class="btn-text">分享报告</text> 
        </view>
    </button>

      <!-- <button class="action-btn share-btn" @click="shareReport">
        <view class="btn-content">
          <text class="btn-icon">📤</text>
          <text class="btn-text">分享报告</text>
        </view>
      </button> -->
      <button class="action-btn restart-btn" @click="restartTest">
        <view class="btn-content">
          <text class="btn-icon">🔄</text>
          <text class="btn-text">重新测试</text>
        </view>
      </button>
    </view>
  </view>
</template>

<script>
 import CryptoJS from 'crypto-js'
export default {
  name: 'ResultPage',
  props: {
    orderId: {
      type: [String, Number],
      required: true
    },
    testId: {
      type: [String, Number],
      required: true
    },
    // price: {
    //   type: String,
    //   required: true
    // }
  },
  data() {
    return {
      activeTab: 'basic', // 默认显示基础画像
      isPaid: false,
      price: "0.00",
      testType: "mbti::standard",
      refreshing: false,
      
      // 基础画像数据（从接口获取）
      mbtiType: 'INTJ',
      personalityTraits: "您具有独立思考、战略规划的能力。善于分析问题，能看到事物的宏观格局。对知识有强烈渴求，追求不断提升自我。",
      personalityTags: ["独立思考", "战略规划", "深度分析", "持续学习"],
      careerAdvice: "适合从事需要深度思考和战略规划的职业，这些职业能够充分发挥您的分析能力和长远眼光。",
      recommendedCareers: ["系统架构师", "管理咨询顾问", "科研人员", "投资分析师", "法律顾问"],
      growthAdvice: "您的成长方向在于平衡理性与感性...",
      fullGrowthAdvice: "您的成长方向在于平衡理性与感性，适当关注他人的感受和需求。尝试参与团队合作项目，培养领导力和沟通技巧。同时也要学会放松，给自己留出休息和娱乐的时间。建议多参与一些创造性活动，这有助于激发您的创新思维。",
      fullJungTips: "荣格八格功能介绍内容...",
      fullCareerTips: "职场小结内容...",
      famousPeople: [
        {
          name: "马克·扎克伯格",
          description: "Facebook创始人，INTJ类型代表",
          avatar: "/static/avatars/zuckerberg.jpg"
        },
        {
          name: "比尔·盖茨",
          description: "微软创始人，INTJ类型代表",
          avatar: "/static/avatars/gates.jpg"
        },
        {
          name: "玛丽·居里",
          description: "诺贝尔奖获得者，INTJ类型代表",
          avatar: "/static/avatars/curie.jpg"
        }
      ],
      
      // 以下数据将从接口获取
      personalityIndexDescription: "管理型权威指数",
      dimensionScores: {
        E: 30,
        I: 70,
        S: 40,
        N: 60,
        T: 80,
        F: 20,
        J: 65,
        P: 35
      },
      rarityText: "约占总人口的8% - 12%，属于比较常见的类型",
      rarityMalePercentage: "10%",
      rarityFemalePercentage: "6%",
      rarityData: "total: 2%,man:1%,woman:1%", // 新的人格稀有度数据格式
      
      // 荣格八格数据
      dominantFunction: "Te（外向思维）：主导功能为Te的ESTJ善于组织和管理外部世界，以客观的逻辑和规则来处理事务，追求效率和结果，能够清晰地规划和安排工作流程，使事情朝着目标有序推进。",
      auxiliaryFunction: "Si（内向感觉）：辅助功能Si让ESTJ能够积累和运用过去的经验和知识，注重细节和事实，对熟悉的环境和流程有很强的适应能力，能从过往的经历中总结出有效的方法。",
      tertiaryFunction: "Ne（外向直觉）：第三功能Ne使ESTJ在一定程度上能够突破常规，看到新的可能性和机会，为他们的决策和计划带来一些创新元素，但相对来说使用频率不如主导和辅助功能。",
      inferiorFunction: "Fi（内向情感）：劣势功能Fi是ESTJ相对薄弱的部分，他们可能不太擅长处理自己和他人的情感，在面对复杂的情感问题时会感到困惑和不自在，有时会忽略他人的情感需求。",
      functionStack: "Te - Si - Ne - Fi",
      developmentSuggestion: "ESTJ可以尝试更加关注自己和他人的情感体验，学会倾听他人的感受和需求，通过阅读相关书籍、参加情感交流活动等方式来提升Fi功能，使自己在人际交往中更加圆融。",
      
      // 职场小结数据
      careerAdvantages: "1. 强大的组织和管理能力，能高效地安排工作和资源。2. 出色的执行力，能够迅速将计划付诸实践。3. 注重细节和事实，决策准确可靠。4. 有责任心，对工作认真负责。5. 具备领导才能，能够带领团队达成目标。",
      suitablePositions: "1. 企业管理者，如CEO、部门经理等。2. 项目经理，负责项目的规划和执行。3. 公务员，在政府部门中从事行政管理工作。",
      communicationStyle: "ESTJ在职场沟通中直接、明确，喜欢表达自己的观点和指令，注重事实和逻辑，希望他人能够迅速理解并执行任务，不喜欢过多的情感交流和模糊不清的表达。",
      leadershipPotential: "ESTJ具有很强的领导潜力，他们的领导风格通常是权威和果断的，能够制定明确的目标和计划，并带领团队严格执行。他们善于分配任务和监督进度，以确保工作的高效完成。",
      careerDevelopmentSuggestion: "1. 学会倾听他人的意见和建议，避免过于独断专行。2. 提升对团队成员情感需求的关注度，增强团队凝聚力。3. 培养创新思维，在工作中尝试新的方法和思路。",
      
      // 恋爱锦囊数据
      loveType: "",
      attractTraits: "",
      expressLove: "",
      idealPartner: "",
      relationshipMaintenance: ""
    };
  },
  mounted() {
    // 组件挂载后调用接口获取数据
    this.fetchTestResultInfo();
  },
  methods: {
     getPriceInfo(testType) {
      // 如果没有传入testType参数，则使用默认值
      let type = testType || "standard";
      
      // 如果testType包含::，则取::之后的部分
      if (type.includes("::")) {
        type = type.split("::")[1];
      }
      
      // 调用接口获取价格
      this.$api.getPrice({testType: type}).then(res => {
        console.log('获取价格成功:', res);
        if (res.data && res.data.code === 200) {
          // 更新价格信息
          console.log('获取价格成功:', res.data.data.Prcie);
          this.price = res.data.data.Prcie;
        } else {
          console.error('获取价格失败:', res.data?.msg || '未知错误');
        }
      }).catch(err => {
        console.error('获取价格接口调用失败:', err);
      });
    },
    // 获取测试结果信息
    async fetchTestResultInfo() {
      try {
        console.log('获取测试结果信息:', this.orderId, this.testId);


        const res = await this.$api.getTestResultInfo({ orderId: this.orderId, TestId: this.testId });
        console.log('获取测试结果信息:', res);
        
        if (res.data && res.data.code === 200) {
          // 根据接口返回的 paid 字段设置 isPaid 状态
          this.isPaid = res.data.data.paid === true;
          // 保存 testType 数据
          this.testType = res.data.data.testType || "mbti::standard";
          //this.price = res.data.data.price;
          this.getPriceInfo(res.data.data.testType);
          // 使用 baseData 中的数据更新页面
          const baseData = res.data.data.baseData;
          if (baseData) {
            this.updatePageData(baseData);
          }
          // 解密 encryptDataStr 并使用其中的数据
          // 这里需要实现 AES 解密逻辑
          if (res.data.data.encryptDataStr){
              const decryptedData = this.decryptAES(res.data.data.encryptDataStr);
              // 如果解密后的数据存在，则更新对应部分的数据
              if (decryptedData) {
                this.updateDecryptedData(decryptedData);
              }
          }
        
        } else {
          uni.showToast({
            title: res.data?.message || '获取测试结果失败',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('获取测试结果信息失败:', error);
        // uni.showToast({
        //   title: '网络错误，获取测试结果失败',
        //   icon: 'none'
        // });
      }
    },
    
    // 更新页面数据
    updatePageData(baseData) {
      try {
        // 根据 baseData 更新页面数据
        this.mbtiType = baseData["MBTI类型"] || this.mbtiType;
        this.personalityTraits = baseData["人格特点"] || this.personalityTraits;
        
        // 处理人格标签
        if (baseData["人格特点"]) {
          // 从人格特点中提取关键词作为标签
          const traits = baseData["人格特点"];
          // 简单提取前几个关键词作为标签
          this.personalityTags = traits.substring(0, 50).split("，").filter(tag => tag.length > 0);
        }
        
        // 处理维度占比数据
        if (baseData["E/I占比"]) {
          const eiRatio = baseData["E/I占比"];
          const eiMatch = eiRatio.match(/E:\s*([\d.]+)%\s*,\s*I:\s*([\d.]+)%/);
          if (eiMatch) {
            this.dimensionScores.E = parseFloat(eiMatch[1]);
            this.dimensionScores.I = parseFloat(eiMatch[2]);
          }
        }
        
        if (baseData["S/N占比"]) {
          const snRatio = baseData["S/N占比"];
          const snMatch = snRatio.match(/S:\s*([\d.]+)%\s*,\s*N:\s*([\d.]+)%/);
          if (snMatch) {
            this.dimensionScores.S = parseFloat(snMatch[1]);
            this.dimensionScores.N = parseFloat(snMatch[2]);
          }
        }
        
        if (baseData["T/F占比"]) {
          const tfRatio = baseData["T/F占比"];
          const tfMatch = tfRatio.match(/T:\s*([\d.]+)%\s*,\s*F:\s*([\d.]+)%/);
          if (tfMatch) {
            this.dimensionScores.T = parseFloat(tfMatch[1]);
            this.dimensionScores.F = parseFloat(tfMatch[2]);
          }
        }
        
        if (baseData["J/P占比"]) {
          const jpRatio = baseData["J/P占比"];
          const jpMatch = jpRatio.match(/J:\s*([\d.]+)%\s*,\s*P:\s*([\d.]+)%/);
          if (jpMatch) {
            this.dimensionScores.J = parseFloat(jpMatch[1]);
            this.dimensionScores.P = parseFloat(jpMatch[2]);
          }
        }
        
        this.personalityIndexDescription = baseData["人格指数"] || this.personalityIndexDescription;
        
        // 处理代表人物
        if (baseData["代表人物"]) {
          const peopleNames = baseData["代表人物"].split("、");
          this.famousPeople = peopleNames.map((name, index) => ({
            name: name.trim(),
            description: `${this.mbtiType}类型代表人物`,
            avatar: `/static/avatars/person${index + 1}.jpg` // 使用默认头像
          }));
        }
        
        // 处理人格稀有度数据
        if (baseData["人格稀有度"]) {
          // 检查是否是新格式: "total: 2%,man:1%,woman:1%"
          if (baseData["人格稀有度"].includes("total:") && baseData["人格稀有度"].includes("man:") && baseData["人格稀有度"].includes("woman:")) {
            this.rarityData = baseData["人格稀有度"];
          }
        }
        
        // 荣格八格数据（从人格字母介绍中提取）
        if (baseData["人格字母介绍"]) {
          // 简单处理，实际应用中可能需要更复杂的解析
          const intro = baseData["人格字母介绍"];
          this.dominantFunction = `主导功能描述：${intro.substring(0, 100)}...` || this.dominantFunction;
          this.auxiliaryFunction = `辅助功能描述：${intro.substring(100, 200)}...` || this.auxiliaryFunction;
          this.tertiaryFunction = `第三功能描述：${intro.substring(200, 300)}...` || this.tertiaryFunction;
          this.inferiorFunction = `劣势功能描述：${intro.substring(300)}...` || this.inferiorFunction;
          this.functionStack = `${this.mbtiType}功能堆栈` || this.functionStack;
          this.developmentSuggestion = "建议根据您的功能特点进行针对性发展" || this.developmentSuggestion;
        }
        
        // 职场小结数据（从人格特点中提取）
        if (baseData["人格特点"]) {
          const traits = baseData["人格特点"];
          this.careerAdvantages = `优势：${traits.substring(0, 100)}...` || this.careerAdvantages;
          this.suitablePositions = "适合岗位：根据您的特点，建议从事管理、执行类工作" || this.suitablePositions;
          this.communicationStyle = "沟通风格：直接、明确，注重事实和逻辑" || this.communicationStyle;
          this.leadershipPotential = "领导潜力：具有很强的领导潜力，风格权威果断" || this.leadershipPotential;
          this.careerDevelopmentSuggestion = "发展建议：学会倾听他人意见，关注团队情感需求" || this.careerDevelopmentSuggestion;
        }
      } catch (error) {
        console.error('解析baseData时出错:', error);
      }
    },
    
    // 更新解密后的数据
    updateDecryptedData(decryptedData) {
      try {
        // 解析解密后的数据
        const parsedData = JSON.parse(decryptedData);
        
        // 更新荣格八维数据
        if (parsedData["荣格八维"] && parsedData["荣格八维"].jsonValue) {
          const jungData = JSON.parse(parsedData["荣格八维"].jsonValue);
          this.dominantFunction = jungData["主导功能"] || this.dominantFunction;
          this.auxiliaryFunction = jungData["辅助功能"] || this.auxiliaryFunction;
          this.tertiaryFunction = jungData["第三功能"] || this.tertiaryFunction;
          this.inferiorFunction = jungData["劣势功能"] || this.inferiorFunction;
          this.functionStack = jungData["认知功能堆栈"] || this.functionStack;
          this.developmentSuggestion = jungData["功能发展建议"] || this.developmentSuggestion;
        }
        
        // 更新职场小结数据
        if (parsedData["职场小结"] && parsedData["职场小结"].jsonValue) {
          const careerData = JSON.parse(parsedData["职场小结"].jsonValue);
          this.careerAdvantages = careerData["优势"] || this.careerAdvantages;
          this.suitablePositions = careerData["适合岗位"] || this.suitablePositions;
          this.communicationStyle = careerData["沟通风格"] || this.communicationStyle;
          this.leadershipPotential = careerData["领导潜力"] || this.leadershipPotential;
          this.careerDevelopmentSuggestion = careerData["发展建议"] || this.careerDevelopmentSuggestion;
        }
        
        // 更新恋爱锦囊数据
        if (parsedData["恋爱锦囊"] && parsedData["恋爱锦囊"].jsonValue) {
          const loveData = JSON.parse(parsedData["恋爱锦囊"].jsonValue);
          this.loveType = loveData["恋爱类型"] || this.loveType;
          this.attractTraits = loveData["吸引特质"] || this.attractTraits;
          this.expressLove = loveData["表达爱意"] || this.expressLove;
          this.idealPartner = loveData["理想伴侣"] || this.idealPartner;
          this.relationshipMaintenance = loveData["关系维护"] || this.relationshipMaintenance;
        }
        
        // 处理解密后的人格稀有度数据
        if (parsedData["人格稀有度"]) {
          const rarityData = parsedData["人格稀有度"];
          // 检查是否是新格式: "total: 2%,man:1%,woman:1%"
          if (typeof rarityData === 'string' && rarityData.includes("total:") && rarityData.includes("man:") && rarityData.includes("woman:")) {
            this.rarityData = rarityData;
          }
        }
      } catch (error) {
        console.error('解析解密数据时出错:', error);
      }
    },
    
    // AES 解密方法（需要根据实际加密算法实现）
    decryptAES(encryptedData) {
      // 这里需要实现具体的 AES 解密逻辑
      // 暂时返回原始数据，实际开发中需要替换为真实的解密实现
      let key="52549111389893486934626385991395";
      let iv="8822wq69s9dsahqn";
   
      return this.decryptByAES(encryptedData, key, iv);
    },
    decryptByAES(data, key, iv) {
        var decrypted = CryptoJS.AES.decrypt(data, CryptoJS.enc.Utf8.parse(key), {
            iv: CryptoJS.enc.Utf8.parse(iv),
            mode: CryptoJS.mode.CBC,
            padding: CryptoJS.pad.Pkcs7
        });
           console.log('解密数据:', decrypted.toString(CryptoJS.enc.Utf8));
        return decrypted.toString(CryptoJS.enc.Utf8);
    },
    switchTab(tab) {
      this.activeTab = tab;
    },
    getMBTITypeName(type) {
      const typeNames = {
        'INTJ': '建筑师',
        'INTP': '逻辑学家',
        'ENTJ': '指挥官',
        'ENTP': '辩论家',
        'INFJ': '提倡者',
        'INFP': '调停者',
        'ENFJ': '主人公',
        'ENFP': '竞选者',
        'ISTJ': '物流师',
        'ISFJ': '守护者',
        'ESTJ': '总经理',
        'ESFJ': '执政官',
        'ISTP': '鉴赏家',
        'ISFP': '冒险家',
        'ESTP': '企业家',
        'ESFP': '表演者'
      };
      return typeNames[type] || '未知类型';
    },
    getMBTISvgImage(type) {
      // 返回MBTI类型对应的SVG图片路径
      // enfp-career.svg
      return `https://hongcat-beta.oss-cn-chengdu.aliyuncs.com/svg/${type}-career.svg`;
    },
    getCompatibleTypes(type) {
      const compatibility = {
        'INTJ': 'ENFP, ENTP',
        'INTP': 'ENTJ, ENFJ',
        'ENTJ': 'INTP, INFP',
        'ENTP': 'INTJ, INFJ',
        'INFJ': 'ENFP, ENTJ',
        'INFP': 'ENFJ, ENTJ',
        'ENFJ': 'INFP, ISFP',
        'ENFP': 'INFJ, INTJ',
        'ISTJ': 'ESFP, ESTP',
        'ISFJ': 'ESFP, ESTP',
        'ESTJ': 'ISFP, ISTP',
        'ESFJ': 'ISFP, ISTP',
        'ISTP': 'ESFJ, ESTJ',
        'ISFP': 'ESFJ, ESTJ',
        'ESTP': 'ISFJ, ISTJ',
        'ESFP': 'ISFJ, ISTJ'
      };
      return compatibility[type] || '待探索';
    },
    getEIPercentage() {
      const e = this.dimensionScores.E;
      const i = this.dimensionScores.I;
      return `${Math.round((e / (e + i)) * 100)}%`;
    },
    getSNPercentage() {
      const s = this.dimensionScores.S;
      const n = this.dimensionScores.N;
      return `${Math.round((s / (s + n)) * 100)}%`;
    },
    getTFPercentage() {
      const t = this.dimensionScores.T;
      const f = this.dimensionScores.F;
      return `${Math.round((t / (t + f)) * 100)}%`;
    },
    getJPPercentage() {
      const j = this.dimensionScores.J;
      const p = this.dimensionScores.P;
      return `${Math.round((j / (j + p)) * 100)}%`;
    },
    getLetterDescriptions() {
      const letters = this.mbtiType.split('');
      // 从"人格字母介绍"中提取描述
      // 这里简化处理，实际应用中可能需要更复杂的解析
      const descriptions = {
        'E': '外向 - 从外部世界获取能量',
        'I': '内向 - 从内心世界获取能量',
        'S': '感觉 - 关注具体事实和细节',
        'N': '直觉 - 关注抽象概念和可能性',
        'T': '思考 - 客观逻辑分析做决定',
        'F': '情感 - 主观价值情感做决定',
        'J': '判断 - 喜欢计划和确定性',
        'P': '知觉 - 喜欢灵活和开放性'
      };
      
      // 如果有更详细的介绍，可以从中提取
      // 这里保留默认描述，因为实际解析可能比较复杂
      
      return letters.map(letter => ({
        letter,
        description: descriptions[letter]
      }));
    },
    getRarityText() {
      const rarityMap = {
        'INTJ': '稀有',
        'INTP': '稀有',
        'ENTJ': '稀有',
        'ENTP': '稀有',
        'INFJ': '极稀有',
        'INFP': '稀有',
        'ENFJ': '较少',
        'ENFP': '较少',
        'ISTJ': '常见',
        'ISFJ': '常见',
        'ESTJ': '常见',
        'ESFJ': '常见',
        'ISTP': '较少',
        'ISFP': '较少',
        'ESTP': '较少',
        'ESFP': '较少'
      };
      
      return rarityMap[this.mbtiType] || '中等';
    },
    getRarityPercentage() {
      const rarityMap = {
        'INTJ': 85,
        'INTP': 80,
        'ENTJ': 82,
        'ENTP': 78,
        'INFJ': 95,
        'INFP': 88,
        'ENFJ': 65,
        'ENFP': 70,
        'ISTJ': 30,
        'ISFJ': 35,
        'ESTJ': 40,
        'ESFJ': 45,
        'ISTP': 60,
        'ISFP': 55,
        'ESTP': 50,
        'ESFP': 52
      };
      
      return `${rarityMap[this.mbtiType] || 50}%`;
    },
    getRarityMalePercentage() {
      const maleMap = {
        'INTJ': '12%',
        'INTP': '15%',
        'ENTJ': '10%',
        'ENTP': '8%',
        'INFJ': '5%',
        'INFP': '7%',
        'ENFJ': '6%',
        'ENFP': '9%',
        'ISTJ': '20%',
        'ISFJ': '18%',
        'ESTJ': '10%',
        'ESFJ': '15%',
        'ISTP': '25%',
        'ISFP': '20%',
        'ESTP': '18%',
        'ESFP': '12%'
      };
      
      return maleMap[this.mbtiType] || '10%';
    },
    getRarityFemalePercentage() {
      const femaleMap = {
        'INTJ': '5%',
        'INTP': '7%',
        'ENTJ': '3%',
        'ENTP': '5%',
        'INFJ': '10%',
        'INFP': '12%',
        'ENFJ': '15%',
        'ENFP': '18%',
        'ISTJ': '15%',
        'ISFJ': '20%',
        'ESTJ': '6%',
        'ESFJ': '25%',
        'ISTP': '10%',
        'ISFP': '15%',
        'ESTP': '8%',
        'ESFP': '20%'
      };
      
      return femaleMap[this.mbtiType] || '6%';
    },
    // 解析新的人格稀有度数据格式: "total: 2%,man:1%,woman:1%"
    parseRarityData(type) {
      // 如果没有新数据，回退到旧的逻辑
      if (!this.rarityData) {
        if (type === 'man') return this.getRarityMalePercentage();
        if (type === 'woman') return this.getRarityFemalePercentage();
        return '0%';
      }
      
      // 解析新的人格稀有度数据格式
      const regex = new RegExp(type + ':([\\d.]+%)');
      const match = this.rarityData.match(regex);
      return match ? match[1] : '0%';
    },
    showPayment(testType, price, id) {
      this.$emit('show-payment', { testType, price, id });
    },
    shareReport() {

      
      wx.downloadFile({
        url: 'https://hongcat-beta.oss-cn-chengdu.aliyuncs.com/share_imgs/share_estj.png',
        success: (res) => {
          wx.showShareImageMenu({
            path: res.tempFilePath,
            success: (re) => {
              console.log('分享成功', re);
            },
            fail: (re) => {
              console.log('分享失败', re);
            }
          });
        },
        fail: (res) => {
          console.log('下载失败', res);
        }
      });
		
      // this.$emit('share-report', this.mbtiType);
    },
    restartTest() {
      this.$emit('restart-test');
    },
    goBack() {
      this.$emit('changeView', 'phone');
    },
    
    // 下拉刷新
    async onRefresh() {
      this.refreshing = true;
      try {
        // 重新获取测试结果信息
        await this.fetchTestResultInfo();
      } catch (error) {
        console.error('刷新失败:', error);
      } finally {
        this.refreshing = false;
      }
    }
  }
}
</script>

<style scoped>
/* 结果页面样式 */
.result-page {
  background-image: url('https://hongcat-beta.oss-cn-chengdu.aliyuncs.com/bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  padding: 0;
  position: relative;
}

.result-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  z-index: 1;
}

.result-header {
  /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
  padding: 60rpx 40rpx 40rpx;
  color: #000;
  border-bottom-left-radius: 40rpx;
  border-bottom-right-radius: 40rpx;
  box-shadow: 0 6rpx 20rpx rgba(0,0,0,0.1);
  position: relative;
  z-index: 2;
  padding-top: 94px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left {
  flex: 1;
  padding-right: 20rpx;
}

.header-right {
  width: 300rpx;
  height: 300rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mbti-svg-image {
  width: 100%;
  height: 100%;
}

.result-title {
  font-size: 36rpx;
  display: block;
  margin-bottom: 20rpx;
  font-weight: normal;
  text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.3);
}

.mbti-type-container {
  margin-bottom: 20rpx;
}

.mbti-type {
  font-size: 80rpx;
  font-weight: bold;
  display: block;
  letter-spacing: 4rpx;
  text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.3);
}

.mbti-name {
  font-size: 36rpx;
  display: block;
  margin-top: 10rpx;
  opacity: 0.9;
  text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.3);
}

.compatibility {
  display: inline-block;
  background-color: rgba(255,255,255,0.2);
  padding: 10rpx 20rpx;
  border-radius: 30rpx;
  font-size: 26rpx;
  margin-top: 20rpx;
  text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.3);
}

.compatibility-label {
  font-weight: bold;
}

/* Tab导航样式 */
.tab-navigation {
  display: flex;
  justify-content: space-around;
  background-color: rgba(255,255,255,0.8);
  backdrop-filter: blur(10rpx);
  padding: 20rpx 0;
  position: relative;
  z-index: 2;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
}

.tab-item {
  font-size: 28rpx;
  padding: 15rpx 20rpx;
  border-radius: 20rpx;
  transition: all 0.3s ease;
}

.tab-item.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-weight: bold;
}

.result-content {
  height: calc(100vh - 220rpx);
  padding: 40rpx;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
  padding-bottom: 160rpx;
}

.refresh-tip {
  text-align: center;
  padding: 20rpx 0;
  color: #999;
  font-size: 28rpx;
}

.result-section {
  background-color: white;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  min-height: calc(100vh - 300rpx);
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.section-icon {
  font-size: 40rpx;
  margin-right: 15rpx;
}

.section-title {
  font-size: 34rpx;
  font-weight: bold;
  color: #333;
}

.section-subtitle {
  font-size: 34rpx;
  font-weight: bold;
  color: #667eea;
  margin-bottom: 25rpx;
  margin-top: 35rpx;
  padding: 20rpx 0;
  border-bottom: 3rpx solid #764ba2;
  text-align: center;
  letter-spacing: 2rpx;
  position: relative;
}

.section-subtitle::after {
  content: '';
  position: absolute;
  bottom: -5rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 80rpx;
  height: 6rpx;
  background: linear-gradient(to right, #667eea, #764ba2);
  border-radius: 3rpx;
}

.section-content {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
  height: 100%;
  box-sizing: border-box;
}

/* 基础画像样式 */
.basic-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30rpx;
}

.mbti-image-container {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 20rpx;
}

.mbti-image {
  width: 100%;
  height: 100%;
  border-radius: 20rpx;
}

.mbti-details {
  text-align: center;
}

.mbti-type-large {
  font-size: 60rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 10rpx;
}

.mbti-name-large {
  font-size: 32rpx;
  color: #666;
}

/* 维度占比样式 */
.dimensions-section {
  margin-bottom: 30rpx;
}

.dimension-item {
  margin-bottom: 30rpx;
  position: relative;
}

.dimension-letters {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rpx;
}

.dimension-letter {
  font-weight: bold;
  color: #333;
  font-size: 28rpx;
  width: 100rpx;
  text-align: center;
}

.dimension-letter.left {
  align-self: flex-start;
}

.dimension-letter.right {
  align-self: flex-end;
}

.progress-container {
  height: 20rpx;
  background-color: #f0f0f0;
  border-radius: 10rpx;
  overflow: hidden;
  margin-bottom: 10rpx;
  position: relative;
}

.progress-bar {
  height: 100%;
  border-radius: 10rpx;
  overflow: hidden;
  position: relative;
}

.progress-fill {
  height: 100%;
  border-radius: 10rpx;
  position: absolute;
  top: 0;
  height: 100%;
}

.progress-fill.left {
  left: 0;
  background: linear-gradient(90deg, #667eea, #764ba2);
  border-radius: 10rpx 0 0 10rpx;
}

.progress-fill.right {
  right: 0;
  background: linear-gradient(90deg, #ff9a9e, #fad0c4);
  border-radius: 0 10rpx 10rpx 0;
}

.dimension-percentages {
  display: flex;
  justify-content: space-between;
}

.dimension-percentage {
  font-size: 24rpx;
  color: #666;
  width: 40rpx;
  text-align: center;
}

.dimension-percentage.left {
  align-self: flex-start;
}

.dimension-percentage.right {
  align-self: flex-end;
}

/* 人格指数样式 */
.personality-index {
  margin-bottom: 30rpx;
}

.index-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
}

.index-item {
  background-color: #f8f9fa;
  padding: 20rpx;
  border-radius: 15rpx;
  text-align: center;
}

.index-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #667eea;
  display: block;
  margin-bottom: 10rpx;
}

.index-label {
  font-size: 24rpx;
  color: #666;
}

/* 人格字母介绍样式 */
.letter-description {
  margin-bottom: 30rpx;
}

.letter-details {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.letter-item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 15rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.letter-item:hover {
  transform: translateY(-2rpx);
  box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.1);
}

.letter {
  font-size: 36rpx;
  font-weight: bold;
  color: #fff;
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  margin-right: 25rpx;
  flex-shrink: 0;
}

.letter-desc {
  font-size: 28rpx;
  color: #333;
  line-height: 1.5;
}

/* 人格特点样式 */
.personality-traits {
  margin-bottom: 30rpx;
}

.traits-text {
  display: block;
  margin-bottom: 20rpx;
}

.traits-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 15rpx;
}

.trait-tag {
  background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 10rpx 20rpx;
  border-radius: 30rpx;
  font-size: 24rpx;
}

/* 人格稀有度样式 */
.rarity-section {
  margin-bottom: 30rpx;
}

.rarity-content {
  text-align: center;
  padding: 20rpx;
  background: linear-gradient(135deg, #fff5f5 0%, #ffecec 100%);
  border-radius: 15rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.rarity-text {
  display: block;
  margin-bottom: 20rpx;
  font-size: 30rpx;
  font-weight: bold;
  color: #ff6b6b;
}

.rarity-bar {
  height: 25rpx;
  background-color: #f0f0f0;
  border-radius: 12rpx;
  overflow: hidden;
  margin-bottom: 15rpx;
  box-shadow: inset 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

.rarity-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff6b6b 0%, #ff8e8e 100%);
  border-radius: 12rpx;
  position: relative;
}

.rarity-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
}

.rarity-percent {
  font-size: 26rpx;
  font-weight: bold;
  color: #ff6b6b;
  margin-bottom: 20rpx;
}

.rarity-details {
  display: flex;
  justify-content: space-around;
  margin-top: 15rpx;
}

.rarity-detail {
  font-size: 24rpx;
  color: #666;
  padding: 10rpx 15rpx;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 10rpx;
  flex: 1;
  margin: 0 10rpx;
}

/* 代表人物样式 */
.celebrity-section {
  margin-bottom: 30rpx;
}

.celebrity-list {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
  margin-top: 20rpx;
}

.celebrity-item {
  display: flex;
  align-items: center;
  padding: 25rpx;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 20rpx;
  box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.celebrity-item:hover {
  transform: translateY(-3rpx);
  box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.12);
}

.celebrity-avatar {
  width: 110rpx;
  height: 110rpx;
  border-radius: 50%;
  margin-right: 25rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 40rpx;
  font-weight: bold;
  box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
}

.celebrity-info {
  flex: 1;
}

.celebrity-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 12rpx;
  position: relative;
}

.celebrity-name::after {
  content: '';
  position: absolute;
  bottom: -6rpx;
  left: 0;
  width: 40rpx;
  height: 3rpx;
  background: linear-gradient(90deg, #667eea, #764ba2);
  border-radius: 2rpx;
}

.celebrity-desc {
  font-size: 26rpx;
  color: #666;
  line-height: 1.5;
}

/* 职业建议样式 */
.career-list {
  margin-top: 20rpx;
}

.career-item {
  display: flex;
  align-items: center;
  margin-bottom: 15rpx;
}

.career-dot {
  color: #007aff;
  margin-right: 15rpx;
  font-size: 32rpx;
}

.career-name {
  font-size: 28rpx;
  color: #333;
}

/* 蒙版内容样式 */
.masked-content {
  margin-top: 20rpx;
  border-radius: 15rpx;
  overflow: hidden;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.mask-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10rpx);
  -webkit-backdrop-filter: blur(10rpx);
  border-radius: 15rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  padding: 40rpx;
  box-sizing: border-box;
  color: #333;
  border: 1rpx solid rgba(255, 255, 255, 0.2);
  height: 100%;
  width: 100%;
}

.mask-text {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
  text-align: center;
  color: #333;
}

.pay-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 50rpx;
  padding: 20rpx 40rpx;
  font-size: 30rpx;
  font-weight: bold;
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(102, 126, 234, 0.3);
}

.pay-icon {
  margin-right: 10rpx;
}

.pay-price {
  font-size: 36rpx;
  font-weight: bold;
  color: #667eea;
}

.masked-text {
  color: transparent;
  background: linear-gradient(90deg, #eee 0%, #f5f5f5 50%, #eee 100%);
  background-size: 200% 100%;
  animation: loading 1.5s ease-in-out infinite;
  border-radius: 15rpx;
  padding: 30rpx;
  display: block;
  line-height: 1.8;
  flex: 1;
  margin-top: 20rpx;
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.result-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  padding: 20rpx 40rpx 40rpx;
  background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,1) 100%);
  backdrop-filter: blur(20rpx);
  box-shadow: 0 -8rpx 40rpx rgba(0,0,0,0.15);
  z-index: 9999;
  border-top: 1rpx solid rgba(0,0,0,0.05);
}

.action-btn {
  flex: 1;
  max-width: 300rpx;
  height: 100rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 25rpx;
  margin: 0 15rpx;
  font-size: 24rpx;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 8rpx 25rpx rgba(0,0,0,0.1);
  position: relative;
  overflow: hidden;
}

.action-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: left 0.6s ease;
}

.action-btn:active::before {
  left: 100%;
}

.action-btn:active {
  transform: scale(0.95);
}

.share-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.share-btn:active {
  background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
}

.restart-btn {
  background: linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 100%);
  color: white;
}

.restart-btn:active {
  background: linear-gradient(135deg, #e55a5a 0%, #e57a7a 100%);
}

.btn-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.btn-icon {
  font-size: 44rpx;
  margin-bottom: 8rpx;
  filter: drop-shadow(0 2rpx 4rpx rgba(0,0,0,0.2));
}

.btn-text {
  font-size: 26rpx;
  font-weight: 600;
  letter-spacing: 1rpx;
  text-shadow: 0 1rpx 2rpx rgba(0,0,0,0.1);
}

.back-button {
  position: absolute;
  top: 74rpx;
  left: 40rpx;
  background: rgba(255, 255, 255, 0.7);
  border: none;
  border-radius: 50%;
  /* padding: 10rpx; */
  font-size: 40rpx;
  color: #333;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  z-index: 3;
}

.back-button:active {
  background: rgba(255, 255, 255, 0.9);
}

/* 恋爱锦囊样式 */
.love-section {
  margin-bottom: 30rpx;
}

.love-text {
  display: block;
  margin-top: 20rpx;
  line-height: 1.6;
  color: #666;
}

/* 提示文本样式 */
.tip-text {
  text-align: center;
  padding: 20rpx;
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  border-radius: 15rpx;
  color: #1976d2;
  font-size: 26rpx;
  margin: 20rpx 0;
  border-left: 8rpx solid #2196f3;
  box-shadow: 0 4rpx 12rpx rgba(33, 150, 243, 0.1);
  position: relative;
  overflow: hidden;
}

.tip-text::before {
  content: 'ℹ️';
  margin-right: 10rpx;
  font-size: 28rpx;
}

.tip-text::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transition: left 1.5s ease-in-out;
  animation: tipShimmer 2s infinite;
}

@keyframes tipShimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}
</style>

